<template>
    <div class="container bg">
        <div class="tops">个人中心</div>
        <div class="userIcon" @click="toSign" v-if="!shows">
            <div class="imgs"><img src="../assets/img/tx_nologin.png" alt=""></div>
            <div class="system-midd">
                <h2>登录/注册</h2>
            </div>
            <div class="icon-right"><img src="../assets/img/mbgmes-ico.png" alt=""></div>
        </div>

        <div class="userIcon" v-show="shows">
            <div class="imgs"><img src="../assets/img/tx_nologin.png" alt=""></div>
            <div class="system-midd">
                <h2>cancan_niuniu</h2>
            </div>
            <div class="icon-right"><img src="../assets/img/mbgmes-ico.png" alt=""></div>
        </div>

        <div class="member-list">
            <ul>
                <router-link to="/myorder" tag="li">
                    <div class="imgs"><img src="../assets/img/newm-icon01.png" alt=""></div>
                    <div class="system-midd">
                        <h2>我是买家</h2>
                    </div>
                    <div class="icon-right"><img src="../assets/img/mbgmes-ico.png" alt=""></div>
                </router-link>
                <li>
                    <div class="imgs"><img src="../assets/img/newm-icon02.png" alt=""></div>
                    <div class="system-midd">
                        <h2>我是卖家</h2>
                    </div>
                    <div class="icon-right"><img src="../assets/img/mbgmes-ico.png" alt=""></div>
                </li>
                <li>
                    <div class="imgs"><img src="../assets/img/newm-gral.png" alt=""></div>
                    <div class="system-midd">
                        <h2>积分中心</h2>
                    </div>
                    <div class="icon-right"><img src="../assets/img/mbgmes-ico.png" alt=""></div>
                </li>
                <li>
                    <img src="../assets/img/gral-tesy.jpg" alt="">
                </li>
                <li @click="toCollection">
                    <div class="imgs"><img src="../assets/img/newm-icon06.png" alt=""></div>
                    <div class="system-midd">
                        <h2>我的收藏</h2>
                    </div>
                    <div class="icon-right"><img src="../assets/img/mbgmes-ico.png" alt=""></div>
                </li>
                <li>
                    <div class="imgs"><img src="../assets/img/newm-icon07.png" alt=""></div>
                    <div class="system-midd">
                        <h2>浏览记录</h2>
                    </div>
                    <div class="icon-right"><img src="../assets/img/mbgmes-ico.png" alt=""></div>
                </li>
                <li>
                    <div class="imgs"><img src="../assets/img/newm-icon14.png" alt=""></div>
                    <div class="system-midd">
                        <h2>我的红包</h2>
                    </div>
                    <div class="icon-right"><img src="../assets/img/mbgmes-ico.png" alt=""></div>
                </li>
                
                <li @click="baloks">
                    <div class="imgs"><img src="../assets/img/newm-icon15.png" alt=""></div>
                    <div class="system-midd">
                        <h2>退出登录</h2>
                    </div>
                    <div class="icon-right"><img src="../assets/img/mbgmes-ico.png" alt=""></div>
                </li>
            </ul>
        </div>
        <bottom-com></bottom-com>
    </div>
</template>

<script>
export default {
    data() {
        return {
            shows: false
        };
    },
    methods: {
        toSign() {
            let token = window.localStorage.getItem("token");
            if (!token) {
                this.$router.push("/sign")
            }

        },
        toCollection() {
            this.$router.push("/collection")
        },
        baloks(){
            let token = window.localStorage.getItem("token");
            if(!token){
                this.$toast("请先登录")
            }else{
                this.$toast("退出成功")
                setTimeout(() => {
                    window.localStorage.removeItem("token")
                    this.$router.push("/home")
                }, 1000);
            }
        }
    },
    components: {
        bottomCom: () => import('../components/bottomCom.vue')
    },
    created() {
        let token = window.localStorage.getItem("token");
        if (token) {
            this.shows = true
        }
    }
}
</script>

<style lang="scss">
@import "../assets/css/base.css";

.bg {
    background-color: #f1f1f1;
    height: 100vh;

    .tops {
        background-color: #f6f6f6;
        height: 48px;
        line-height: 48px;
        font-size: 16px;
        color: #282b2d;
        text-align: center;
    }

    .userIcon {
        height: 91px;
        margin: 3px 0px 10px 0px;
        background-color: #ffffff;
        display: flex;
        align-items: center;

        .imgs {
            width: 63px;
            height: 63px;
            margin-left: 8px;
            border-radius: 50%;

            img {
                border-radius: 50%;
            }
        }

        .system-midd {
            margin-left: 10px;
            width: 80%;
        }

        .system-midd>h2 {
            font-size: 14px;
            color: #5d595d;
        }

        .icon-right {
            margin-right: 10px;
            width: 7px;
            height: 17px;
        }
    }

    .member-list {
        ul {
            li {
                height: 55px;
                line-height: 55px;
                background-color: #fff;
                display: flex;
                align-items: center;
                border-bottom: 2px solid #f6f6f6;

                .imgs {
                    width: 20px;
                    height: 20px;

                    margin-left: 8px;

                    img {
                        border-radius: 4px;
                    }
                }

                .system-midd {
                    margin-left: 10px;
                    width: 80%;
                }

                .system-midd>h2 {
                    font-size: 15px;
                    color: #313535;
                    font-weight: 500;
                }

                .system-midd>p {
                    font-size: 12px;
                    color: #646363;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .icon-right {
                    margin-right: 10px;
                    width: 7px;
                    height: 17px;
                }

            }
        }
    }
}
</style>